<div style="margin-left: 40px">
  <form dForm [layout]="layoutDirection" [labelSize]="'sm'">
    <d-form-item>
      <d-form-label [required]="true">Name</d-form-label>
      <d-form-control
        [extraInfo]="
          'Enter a short name that meets reading habits, up to 30 characters, cannot be a system field, and cannot be the same as an existing field.'
        "
      >
        <input dTextInput name="userName" />
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>Description</d-form-label>
      <d-form-control>
        <textarea dTextarea name="desc" maxlength="200" [resize]="'vertical'" class="plan-desc"></textarea>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label [required]="true">Select</d-form-label>
      <d-form-control>
        <d-select [options]="selectOptions" name="select1" [filterKey]="'label'" [(ngModel)]="formData.selectValue"></d-select>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label [required]="true"><span style="line-height: 46px">Radio</span></d-form-label>
      <d-form-control>
        <d-select [options]="selectOptions" name="select1" size="lg" [filterKey]="'label'" [(ngModel)]="formData.selectValue"></d-select>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label [required]="true">Multiple options</d-form-label>
      <d-form-control>
        <d-select
          name="multiSelect"
          [options]="selectOptions"
          [filterKey]="'label'"
          [isSearch]="true"
          [multiple]="true"
          [extraConfig]="{
            labelization: multipleSelect2DemoConfig.labelization
          }"
          [ngModel]="formData.multipleSelectValue"
        ></d-select>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>Tags</d-form-label>
      <d-form-control>
        <d-tags-input
          name="tag"
          (click)="$event.stopPropagation()"
          [displayProperty]="'label'"
          [tags]="addedLabelList"
          [placeholder]="'Tags'"
          [suggestionList]="labelList"
        >
        </d-tags-input>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label class="single-radio">Radio</d-form-label>
      <d-form-control>
        <d-radio-group name="schedule" [direction]="'row'" [(ngModel)]="formData.radioValue">
          <d-radio *ngFor="let option of radioOptions" [name]="'schedule'" [value]="option.id">
            {{ option.label }}
          </d-radio>
        </d-radio-group>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>Switch</d-form-label>
      <d-form-control>
        <d-toggle name="anonymous" [(ngModel)]="formData.toggleValue"></d-toggle>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>Execution day</d-form-label>
      <d-form-control [extraInfo]="customTemplate">
        <d-checkbox-group
          [options]="checkboxOptions"
          [name]="'runDay'"
          [direction]="'row'"
          [filterKey]="'label'"
          [isShowTitle]="true"
        ></d-checkbox-group>
      </d-form-control>
    </d-form-item>
    <d-form-operation>
      <d-button bsStyle="primary" class="mr-element-spacing" circled="true" style="margin-right: 4px">Submit</d-button>
      <d-button bsStyle="common" circled="true">Cancel</d-button>
    </d-form-operation>
  </form>
  <ng-template #customTemplate>
    <span>Choose your execution cycle, it is recommended to choose Monday, Wednesday, Friday.</span>
  </ng-template>
</div>
